<template>
  <div>
    <div class="eng">
      <!-- {{item.text}} -->
      <span class="englishItemvhtmlClass" v-html="textHtml"></span>
      <van-icon name="chat-o"
                @click="remarkClickHandle"
                v-if="item.remark" />
      <div v-if="remarkShow"
           v-html="item.remark"
           class="remarkDivClass">
      </div>
    </div>
    <div style="text-align:right; margin-bottom: 20px;"
         v-show="$app.audioButtonShow">
      <van-button size="mini"
                  @click="play1audio"
                  type="default">常速播放</van-button>
      <van-button size="mini"
                  @click="play2audio"
                  type="default">慢速播放</van-button>
      <van-button size="mini"
                  @click="play3audio"
                  type="default">极慢播放</van-button>
      <van-button size="mini"
                  @click="stopAudio"
                  type="default">停止播放</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnglishItem',
  components: {},
  props: {
    parentThis: {
      type: Object,
      default () {
        return {}
      }
    },
    item: {
      type: Object,
      default () {
        return {
          text: "default",
          audio: "",
          remark: "",
        }
      }
    }
  },
  data () {
    return {
      remarkShow: false,
      textHtml: '',
    }
  },
  watch: {},
  computed: {},
  methods: {
    remarkClickHandle () {
      this.remarkShow = !this.remarkShow
    },
    stopAudio () {
      if (this.parentThis.audio) {
        this.parentThis.audio.pause()
        this.parentThis.audio = null
      }
    },
    playAudio ({ playbackRate }) {
      if (this.parentThis.audio) {
        this.parentThis.audio.pause()
        this.parentThis.audio = null
      }
      const audioUrl = "assets/mp3/" + this.item.audio
      this.parentThis.audio = new Audio(audioUrl)
      this.parentThis.audio.loop = this.$app.isLoop
      this.parentThis.audio.playbackRate = playbackRate
      this.parentThis.audio.play()
    },
    play1audio () {
      this.playAudio({ playbackRate: 1 })
    },
    play2audio () {
      this.playAudio({ playbackRate: 0.5 })
    },
    play3audio () {
      this.playAudio({ playbackRate: 0.25 })
    },
    addLiandu (ctx, next) {
      const liandu = `<sup class="lianduClass">︵</sup>`
      ctx.text = ctx.text.replace(/~/g, liandu)
      next()
    },
    addSeparator (ctx, next) {
      // const separator = `<span style="color:#ccc; display:inline-block; width:10px;">/</span>`
      const separator = ` <span style="color:#ccc;">/</span> `
      ctx.text = ctx.text.replace(/ \/ /g, separator)
      console.info('addSeparator ctx.text', ctx.text)
      next()
    },
    setTextHtml () {
      const ac = this.$getAc()
      ac.ctx.text = this.item.text
      ac.use(this.addSeparator)
      ac.use(this.addLiandu)
      ac.use((ctx, next) => {
        this.textHtml = ctx.text
      })
      ac.run()
    },
  },
  created () { },
  activated () { },
  mounted () {
    this.setTextHtml()
  },
  beforeDestroy () { }
}
</script>

<style>
.lianduClass {
  color: firebrick;
  margin-top: -15px;
  margin-left: -4px;
  position: absolute;
}
.remarkDivClass {
  margin-bottom: 10px;
  background-color: #166e97;
  padding: 10px 20px;
  color: #fff;
  border-radius: 20px;
}
</style>